<script setup>
import LoginService from "@/service/impl/LoginService.js"
import LoginModel from "@/model/LoginModel.js"
import {useRouter} from "vue-router";
import {log} from "@/util/Log.js";
import IndexService from "@/service/impl/IndexService.js"
import {baseStore} from "@/store/baseStore";

let bs = baseStore()
let ro = useRouter().options.routes[2].children
let ruleForm = ref(null)
let router = useRouter()
const from = ref(new LoginModel())
const load = ref(false)
const imageUrl = ref()

const login = () => {
    ruleForm.value.validate(async (valid) => {
        if (valid) {
            load.value = true
            if(!await LoginService.login(from.value, ro)){
                load.value = false
                return
            }
            router.push('/dashboard')
            load.value = true
        } else {
            return false;
        }
    })
}

const init = () => {
    IndexService.index().then(res => {
        imageUrl.value = window.URL.createObjectURL(res.data);
        const sessionId = res.headers['sessionid']
        const seed = res.headers['seed']
        const id = res.headers['id']
        from.value.id = id
        // 算出key，存到session
        bs.computeStorage(sessionId,16,seed)
    }).catch(e => {

    })
}

onMounted(() => {
    init()
})

</script>
<template>
    <el-row class="login">
        <el-row class="login-row">
            <el-row class="login-row-com">{{ $t('login.slogan') }}</el-row>
            <el-form
                ref="ruleForm"
                :label-position="'top'"
                :rules="from.rules"
                :model="from"
                class="login-row-form"
            >
                <el-form-item :label="$t('login.account')" prop="account">
                    <el-input v-model="from.account" clearable/>
                </el-form-item>
                <el-form-item :label="$t('login.password')" prop="password">
                    <el-input v-model="from.password" type="password" show-password/>
                </el-form-item>
                <el-form-item :label="$t('login.code')">
                    <el-input v-model="from.code" style="width: 60%"/>
                    <el-image @click="init" :src="imageUrl" style="width: 120px; height: 30px; margin-left: auto">
                        <template #error>
                            <div class="image-slot">
                                <el-icon><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-button" @click="login" :loading="load">{{ $t('login.login') }}</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </el-row>
</template>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    background-color: #303133;

    .login-row {
        width: 450px;
        margin: auto;

        .login-row-form {
            padding: 50px;
            width: 100%;
        }

        .login-button {
            margin-top: 15px;
            width: 100%;
        }

        .login-row-com {
            color: white;
        }
    }
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        font-size: 20px;
        width: 120px;
        height: 30px;
    }
}

</style>
